<template>
  <div class="page">
    <global-header title="入群申请" @back="$router.back()"></global-header>
    <main class="page-main !overflow-hidden page">
      <div class="bg-[#fff]">
        <van-search
          class="search-field"
          @search="handleSearch"
          @clear="handleSearch"
          @click-left-icon="handleSearch"
          v-model="form.name"
          placeholder="搜索用户名/昵称/备注"
          shape="round"
        >
          <template #left-icon>
            <div class="flex items-center h-full">
              <svg-icon name="chat-search"></svg-icon>
            </div>
          </template>
        </van-search>
      </div>
      <div class="px-[15px] pb-[10px] bg-[#fff]">
        <custom-tabs v-model:value="form.status" :options="statusType" />
      </div>
      <div class="px-[15px] bg-[#fff] py-[10px] border-bottom mt-[10px]">
        <ul class="flex justify-between items-center text-[14px]">
          <li class="flex-1 w-0 text-center">用户名</li>
          <li class="flex-1 w-0 text-center">申请时间</li>
          <li class="flex-1 w-0 text-center">审核时间</li>
          <li class="flex-1 w-0 text-center">状态</li>
        </ul>
      </div>
      <div class="page-main">
        <div class="bg-white">
          <scroll-list
            emptyImage
            enableRefresh
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @refresh="refresh"
            @load="load"
          >
            <template v-for="item in list">
              <JoinItem :item="item" @show="handleShow" />
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
    <JoinStatusPopup :id="joinId" ref="joinStatusPopupRef" @update="handleUpdate" />
  </div>
</template>
<route>
  {
    name: "admin-apply-join-room",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import JoinItem from "./components/join-item.vue";
import JoinStatusPopup from "./components/join-status.popup.vue";

import $bus from "@/utils/bus";
import { reqJoinRoomList } from "@/api/apply";
import { useList } from "@/hooks/useList";
import { cloneDeep, debounce } from "lodash-es";
import { usePremsStore } from "@/store/modules/prems";
import { toast } from "@/utils/toast";

const joinStatusPopupRef = ref();
const premsStore = usePremsStore();
const statusType = [
  { text: "全部状态", value: "-1" },
  { text: "审核中", value: "1" },
  { text: "已通过", value: "0" },
  { text: "已拒绝", value: "2" }
];
const joinId = ref(0);
const form = reactive({
  name: "",
  status: "-1"
});

// 获取参数
const getParams = () => {
  const params: any = {};
  if (form.name) {
    params.Name = form.name;
  }
  if (form.status && form.status != "-1") {
    params.Status = form.status;
  }
  return params;
};
const { state, list, refresh, getData, search, load } = useList<JoinRoomRecordItem, any>(
  reqJoinRoomList,
  getParams
);

const handleSearch = debounce(() => {
  search();
}, 500);

const handleShow = (id: number) => {
  if (!premsStore.isApplyJoinroom) {
    toast.info("暂无权限");
    return;
  }
  joinId.value = id;
  nextTick(() => {
    joinStatusPopupRef.value?.open();
  });
};

const handleUpdate = (id: number, key: 0 | 2) => {
  const arr = cloneDeep(list.value);
  arr.forEach(jtem => {
    if (jtem.Id == id) {
      jtem.IncomeStatus = key;
    }
  });
  list.value = cloneDeep(arr);
};

watch(
  () => [form.status],
  () => {
    nextTick(search);
  }
);
onMounted(() => {
  getData();
  // 监听监听进房审核消息
  $bus.on("update-join-room-msg", () => {
    nextTick(search);
  });
});
onBeforeUnmount(() => {
  $bus.off("update-join-room-msg");
});
</script>
